<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select-2</title>
</head>
<body>
<div id="app">
    <!--
    列表渲染 ：v-for
    -->
    <select  v-model="selected" @change="cityChange">
        <option v-for="city in cities" :value="city.id">{{city.name}}</option>
    </select>

    <select>
        <option v-for="area in areas" :value="area.id">{{area.name}}</option>
    </select>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script src="../../mock/cities.js"></script>
<script>

  var app=  new Vue({
        el:'#app',
        data:{
            cities:[],
            areas:[],
            selected:1
        },
        mounted:function () {
            this.cities = cities;
        },methods:{
          cityChange:function () {
              var _this = this;
             var current=  cities.find(function (item) {
                  return item.id==_this.selected;
              })
              this.areas = current.children;
          }
      }
    })
</script>
</html>